<template>
  <div>
    <Form
      :model="editForm"
      ref="serverEditForm"
      class="ivu-form-no-margin-bottom"
      :rules="rules"
      :label-width="95"
    >
      <Row :gutter="32" class="code-row-bg">
<!--        服务分类-->
        <Col span="12">
          <form-item prop="serverClassification" :label="$t('module.serverApi.serverClassification')">
            <Select
              siz="small"
              v-model="editForm.serverClassification"
              :placeholder="$t('module.serverApi.serverClassificationSelect')"
              filterable
              transfer
              clearable
            >
              <Option
                v-for="(item, index) in serverTypeList"
                :key="index"
                :value="item.id"
                :label="item.vsiValue"
              ></Option>
            </Select>
          </form-item>
        </Col>
<!--        服务商-->
        <Col span="12">
          <form-item prop="serverProvider" :label="$t('module.serverApi.serverProvider')">
            <Select
              siz="small"
              v-model="editForm.serverProvider"
              :placeholder="$t('module.serverApi.serverProviderSelect')"
              filterable
              transfer
              clearable
            >
              <Option
                v-for="(item, index) in serverProviderList"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></Option>
            </Select>
          </form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="12" style="border: none">
          <form-item prop="apiName" :label="$t('module.serverApi.apiName')">
            <Input
              
              :placeholder="$t('module.serverApi.apiNameInput')"
              v-model.trim="editForm.apiName"
              style="width: 100%"
            />
          </form-item>
        </Col>
        <Col span=12 style="border: none">
          <form-item prop="apiAddress" :label="$t('module.serverApi.apiAddress')">
            <Input
              
              :placeholder="$t('module.serverApi.apiAddressInput')"
              v-model.trim="editForm.apiAddress"
              style="width: 100%"
            /></form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import locales from "./locales";
import serverAndResource from "@/api/serverAndResource";

export default {
  name: "serverApiEdit",
  mixins: [locales],
  props: {
    serverTypeList: {
      type: Array,
      default: () => []
    },
    serverProviderList: {
      required: true,
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      // serverType: [],
      // serverProviderList: [],
      editForm: {
        serverClassification: "",
        serverProvider: "",
        apiName: "",
        apiAddress: ""
      },
      rules: {
        serverClassification: [
          { required: true, message: this.$t('module.serverApi.serverClassificationSelect'), trigger: 'change' }
        ],
        serverProvider: [
          { required: true, message: this.$t('module.serverApi.serverProviderSelect'), trigger: 'change' }
        ],
        apiName: [
          { required: true, message: this.$t('module.serverApi.apiNameInput'), trigger: 'blur' }
        ],
        apiAddress: [
          { required: true, message: this.$t('module.serverApi.apiAddress'), trigger: 'blur' }
        ]
      },
      actions: [
        {
          text: this.$t("common.save"),
          theme: "warning",
          icon: "edit",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          theme: "primary",
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.rowList && this.rowList.id) {
        this.$emit("SetTitle", this.$t("module.serverApi.editServer"));
      } else {
        this.$emit("SetTitle", this.$t("module.serverApi.createServer"));
      }
      this.$emit("SetPageWidth", 700);
      this.$emit("SetPageActions", this.actions);
    },
    save() {
      //TODO: 记得删除
      // this.editForm.serverProvider = '测试服务商'

      this.$refs.serverEditForm.validate(valid => {
        if (valid) {
          this.actions[0].loading = true
          const params = {
            "interfaceAddress": this.editForm.apiAddress,
            // "interfaceCode": "string",
            "interfaceName": this.editForm.apiName,
            "serviceClassify": this.editForm.serverClassification,
            "serviceProviderCode": "ceshi-werwwewerwsdasdfwerqwer",
            "serviceProviderName": this.editForm.serverProvider,
            // "status": 0
          }
          serverAndResource.addServerApi(params).then(res => {
            this.$message.success('操作成功')
          }).catch(err => {
            this.$message.error(err.msg)
          })
        }
      })
    }
  }
};
</script>

<style scoped>

</style>
